<template>
  <div id="app">
    <!-- Sidebar -->
    <div class="sidebar">
      <div class="sidebar-header">
        <a @click="currentRoute = '/'" class="logo">
          <h1>MyPostman帮助文档</h1>
          <span>v1.0.0</span>
        </a>
      </div>
      <nav>
        <ul>
          <li v-for="item in navItems" :key="item.path">
            <a
                @click="currentRoute = item.path"
                :class="{ active: currentRoute === item.path }"
            >
              {{ item.name }}
            </a>
          </li>
        </ul>
      </nav>
    </div>

    <!-- Content -->
    <div class="content">
      <!-- Home -->
      <div v-if="currentRoute === '/'">
        <h1>项目简介</h1>
        <p>
          这是一个基于vue2和axios的在线接口测试平台，支持对接口的GET、POST、PUT、DELETE等请求方法的发送，并且展示响应的response数据。
        </p>
        <h2>Features</h2>
        <ul>
          <li>基于vue2搭建</li>
          <li>使用axios进行请求发送</li>
          <li>处理了浏览器的跨域请求限制</li>
          <li>清爽的前端界面</li>
        </ul>
        <h2>Getting Started</h2>
        <p>
          可以参考后面的Getting Started 文档，了解如何安装和使用我们的工具。
        </p>
        <p>
          如果您有任何问题请发送邮件到wangzy455@gmail.com，我们会在第一时间进行回复
        </p>
        <h2>Contributing</h2>
        <p>
          我们欢迎任何开发者对我们的项目进行贡献，后续项目会开源到GitHub和Gitee上进行维护，欢迎提出issue和pull request，我们会尽快进行处理。
        </p>
        <img 
            src="https://pic.imgdb.cn/item/6761261cd0e0a243d4e51c6f.png"
         alt=""/>
      </div>

      <!-- Getting Started -->
      <div v-else-if="currentRoute === '/getting-started'">
        <h1>快速开始</h1>
        <p>
          欢迎使用My-Postman接口测试平台，请根据文档配置本地开发环境。
        </p>
        <h2>Installation</h2>
        <pre><code>git clone https://gitee.com/a-mind-full-of-attention/my-postman.git</code></pre>
        <h2>Configuration</h2>
        <p>
          根据下面的命令安装相应的配置
        </p>
        配置vuex进行状态管理
        <pre><code>npm install vuex@3</code></pre>
        配置router进行路由管理
        <pre><code>npm install vue-router@3</code></pre>
        配置element-ui组件库
        <pre><code>npm install element-ui@2</code></pre>
        配置axios进行请求发送
        <pre><code>npm install axios</code></pre>

        <h2>测试用例</h2>
        <p>
          下面是一个go后端代码，运行在8080端口的服务，可以测试post和get方法
        </p>
        <pre><code>package main

import (
	"encoding/json"
	"fmt"
	"log"
	"net/http"
)

// 定义请求和响应结构体
type PostData struct {
	Title  string `json:"title"`
	Body   string `json:"body"`
	UserID int    `json:"userId"`
}

// 处理 GET 请求的函数
func handleGet(w http.ResponseWriter, r *http.Request) {
	// 设置CORS头
	setCORSHeaders(w)

	// 设置响应头
	w.Header().Set("Content-Type", "application/json")

	// 模拟返回的数据
	response := map[string]string{
		"message": "This is a GET response",
		"status":  "success",
	}

	// 设置状态码 200 OK
	w.WriteHeader(http.StatusOK)

	// 将响应数据编码为 JSON 并返回
	json.NewEncoder(w).Encode(response)
}

// 处理 POST 请求的函数
func handlePost(w http.ResponseWriter, r *http.Request) {
	// 设置CORS头
	setCORSHeaders(w)

	// 如果是预检请求，直接返回 200 OK
	if r.Method == http.MethodOptions {
		w.WriteHeader(http.StatusOK)
		return
	}

	// 设置响应头
	w.Header().Set("Content-Type", "application/json")

	// 解析 POST 请求体中的 JSON 数据
	var postData PostData
	err := json.NewDecoder(r.Body).Decode(&postData)
	if err != nil {
		// 如果解析错误，返回 400 Bad Request
		w.WriteHeader(http.StatusBadRequest)
		json.NewEncoder(w).Encode(map[string]string{"error": "Invalid JSON"})
		return
	}

	// 模拟处理后的数据（这里只是回传接收到的数据）
	response := map[string]interface{}{
		"message": "POST request successful",
		"data":    postData,
	}

	// 设置状态码 201 Created
	w.WriteHeader(http.StatusCreated)

	// 将响应数据编码为 JSON 并返回
	json.NewEncoder(w).Encode(response)
}

// 设置 CORS 头
func setCORSHeaders(w http.ResponseWriter) {
	w.Header().Set("Access-Control-Allow-Origin", "*")                   // 允许所有来源
	w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS") // 允许的请求方法
	w.Header().Set("Access-Control-Allow-Headers", "Content-Type")       // 允许的请求头
}

func main() {
	// 路由配置
	http.HandleFunc("/get", handleGet)   // GET 请求处理
	http.HandleFunc("/post", handlePost) // 处理 POST 请求和 OPTIONS 请求

	// 启动服务器并监听端口 8080
	port := 8080
	fmt.Printf("Server is running on http://localhost:%d\n", port)
	log.Fatal(http.ListenAndServe(fmt.Sprintf(":%d", port), nil))
}
</code></pre>
        <p>
           post测试用例
        </p>
        <pre><code>
          http://localhost:8080/post
          {
           "title": "Test Post",
           "body": "This is the body of the post request",
           "userId": 1
          }
        </code></pre>
        <p>
          get测试用例
        </p>
        <pre><code>
          http://localhost:8080/get
        </code></pre>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      currentRoute: '/',
      navItems: [
        { name: '项目介绍', path: '/' },
        { name: '快速开始', path: '/getting-started' },
      ]
    }
  }
}
</script>

<style scoped>
#app {
  font-family: 'Inter', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  color: #2c3e50;
}

.sidebar {
  width: 18rem;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #f8f9fa;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
}

.logo {
  text-decoration: none;
  color: #333;
  cursor: pointer;
}

.logo h1 {
  font-size: 1.5rem;
  margin: 0;
}

.logo span {
  font-size: 0.875rem;
  color: #6c757d;
}

.search-container {
  padding: 1rem;
}

.search-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

nav {
  flex: 1;
  overflow-y: auto;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav ul li a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #495057;
  cursor: pointer;
}

nav ul li a.active {
  background-color: #e9ecef;
  font-weight: bold;
}

.content {
  flex: 1;
  padding: 2rem;
  margin-left: 18rem;
  max-width: 48rem;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
}

ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

pre {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  overflow-x: auto;
}

code {
  font-family: 'Courier New', Courier, monospace;
}

</style>